{% extends "admin/index.html" %}
{% load i18n %}

{% block breadcrumbs %}
    <div id="breadcrumbs">
      <a href="/">{% trans 'Home' %}</a>{% if title %} &rsaquo; {{ title }}{% endif %}
      &rsaquo; <a href="{% url ecwsp.omr.views.my_tests %}">{% trans 'My Tests' %}</a>
      &rsaquo; <a href="{% url ecwsp.omr.views.edit_test test.id %}">{{ test }}</a>  
      &rsaquo; {{ test }} Resultsdownload_results
    </div>
{% endblock %}

{% block extrahead %}
    {% load adminmedia %}
    <script type="text/javascript" src="/admin/jsi18n/"></script>
    
    <style type="text/css">
      .content-grid {
        min-width: 800px !important;
      }
    </style>
{% endblock %}

{% block stylesheets %}
  {{ block.super }}
  <style type="text/css">
    
  </style>
  <link rel="stylesheet" type="text/css" href="/static/js/jqplot/jquery.jqplot.min.css" /> 
{% endblock %}

{% block javascripts %}
  {{ block.super }}
  <script type="text/javascript" src="/admin/jsi18n/"></script>
  <script type="text/javascript" src="/static/js/jquery.progressbar.min.js"></script>
  <script type="text/javascript" src="/static/js/jqplot/jquery.jqplot.min.js"></script> 
  <script type="text/javascript" src="/static/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
  <script type="text/javascript" src="/static/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
  <script type="text/javascript" src="/static/js/jqplot/plugins/jqplot.highlighter.min.js"></script>
  <script type="text/javascript" src="/static/js/jqplot/plugins/jqplot.cursor.min.js"></script>
  <script type="text/javascript" src="/static/js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
  <script type="text/javascript" src="/static/js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
  <script type="text/javascript" src="/static/js/jqplot/plugins/jqplot.trendline.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var percent = {{ test.students_test_results }} / {{ test.testinstance_set.count }};
      $("#progress_recieved").progressBar(percent, {
        showText: false,
        barImage: '/static/images/progressbg_green.gif'
      });
      
      var line1 = [
        {% for ti in test.testinstance_set.all %}
          [{{ ti.points_earned }}, "{{ ti.student }}"],
        {% endfor %}
      ];
      line1 = line1.sort()
      line2 = []
      for (i=1; i<=line1.length; i++){
        new_line = [i];
        new_line = new_line.concat(line1[i-1]);
        line2 = line2.concat([new_line]);
      }
      
      var plot3 = $.jqplot('chart1', [line2], {
        series: [{
          showLine: false,
        }],
        axes: {
          xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions:{
              formatString:''
            }
          },
          yaxis: {
            padMax: 1.3,
            max: {{ test.points_possible }}
          }
        },
        highlighter: {
          yvalues: 2,
          show: true,
          sizeAdjust: 7.5
        }
      });
    });</script>
{% endblock %}

{% block content %}
  <h1> Open Metric Recognition </h1>
  
  <h2>{{ test }} Results </h2>
  <br/>
  <p id="progress_recieved"></p>
  {{ test.students_test_results }} of {{ test.testinstance_set.count }} scanned tests recieved. Need <a href="https://sites.google.com/a/cristoreyny.org/sword-wiki/openmetricrecognition">help</a>?
  <br/>
  <a href="download_xls">Download results (spreadsheet)</a><br/>
  <a href="download_student_results">Download Student results (document to hand to students)</a><br/>
  <a href="download_answer_sheets">Download Answer Sheets</a>
  
  <br/>
  <div id="chart1" style="height:500px; width:800px;"></div>
  Mouse over chart to see students
{% endblock %}
